<template>
	<view style="flex: 1;">
		<view class="picker" :style="{height}" @click.stop="open">
			<view class="value" :style="{fontWeight: bold ? 'bold': 400}" v-if="value">{{value}}</view>
			<view class="placeholder" v-else>{{placeholder}}</view>
			<u-icon name="arrow-right" color="#9a9a9a" size="32rpx"></u-icon>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="close" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		name:"custom-picker",
		props: {
			columns: {
				type: Array,
				default: []
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			height: {
				type: String,
				default: '80rpx'
			},
			bold: {
				type: Boolean,
				default: false
			},
			defaultValue: {
				type: String,
				require: true
			}
		},
		data() {
			return {
				// 层级选择器展示状态
				show: false,
				value: this.defaultValue
			};
		},
		methods: {
			open(){
				this.show = true;
			},
			close(){
				this.show = false;
			},
			confirm(e){
				this.close();
				const value = e.value[0];
				this.value = value;
				this.$emit('confirm', value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.value{
			font-size: $fs-30;
			color: $black;
		}
		.placeholder{
			font-size: $fs-30;
			color: $grey;
		}
	}
</style>